<template>
  <div class="register">
    <div class="backdrop">
      <img src="@/assets/images/logo_pic.jpg" alt="您的浏览器你不支持">
    </div>
    <div class="title-logo">
      <div class="logo">
        <img src="@/assets/images/logo_115_115.png" alt="您的浏览器你不支持">
      </div>
      <div class="title">
        <h3>蓝莓派</h3>
        <hr>
        <p>和音乐一起分享时光</p>
      </div>
    </div>
    <div class="login-box">
      <input class="userName" v-model="LUserName" type="username" name=""  v-on:blur="usernameHandle" placeholder="请输入用户名">
      <input class="passWord" v-model="LUserPsd" type="password" @blur="passwordHandle" name="" placeholder="请输入账号密码">
      <input class="passWords" v-model="LUserPsds" type="password" @blur="passwordsHandle" name="" placeholder="请确认账号密码">
      <input class="verify" v-model="picLyanzhengma" @blur="checkLpicma" type="text" name="" placeholder="验证码" >
      <input type="button" id="code" @click="createCode" class="verification1" v-model="checkCode"/> <br>
      <button type="button" @click="registerHandle">注册</button>
    </div>
    <div class="foot">
      <p>您还可以使用第三方账号登录</p>
      <i @click="qqHandle" class="iconfont">&#xe601;</i>
      <i @click="wxHandle" class="iconfont">&#xe63e;</i>
      <i @click="wbHandle" class="iconfont">&#xe657;</i>
      <p class="copyright">蓝莓派版权所有 京ICP备12346335号</p>
    </div>
    <div class="result"><p>{{ this.value }}</p></div>
  </div>
</template>

<script>
var code ; 
import qs from "qs"
export default {
  name: 'Register',
  data(){
    return{
      userPhone:'',
      dialog: false,
      LUserName:'',
      LUserPsd:'',
      LUserPsds:'',
      picLyanzhengma:'',
      checkCode:'info',
      value:''
    }
  },
  methods:{
    registerHandle(event){
      console.log(this.usernameHandle())
      console.log(this.passwordHandle())
      console.log(this.passwordsHandle())
      console.log(this.checkLpicma())

      if(this.usernameHandle() == true && this.passwordHandle() === true && this.passwordsHandle() === true && this.checkLpicma() === true){
        this.$axios.get(this.HOST+"/api/register",{
          params:{
            "username":this.LUserName,
            "password":this.LUserPsd
        }})
        .then(data => {
          console.log(data)
          if (data.data.code===200) {
            this.$router.push({path:"Login",query:{msg:"注册成功"}})
          }else{
            this.value = "注册失败"
          }
        })
        .then(error => {
          console.log(error)
        })
      }
      else{
        console.log("www")
      }
    },
    // 失去焦点判断账号是否为空
    usernameHandle(event){
      // 失去焦点判断用户名是否重复 
      this.$axios.get(this.HOST+"/api/check",{
        params:{
          "username":this.LUserName
      }})
      .then(data => {
        if (data.data.code===200) {
          this.value = "用户名已存在"
        }
        if(this.LUserName==""){
          this.value = "账号不能为空"
        }else if(this.LUserName.length>0){
          this.value = ""
          return true
        }
      })
    },
    // 失去焦点判断密码是否为空
    passwordHandle(event){
      if(this.LUserPsd==""){
        this.value = "密码不能为空"
      }else if(this.LUserPsd !== this.LUserPsds){
        this.value = "两次密码不一致请重新输入"
      }else if(this.LUserPsd.length>0&&this.LUserPsd == this.LUserPsds){
        this.value = ""
        return true
      }
    },
    // 失去焦点判断两次密码是否一致
    passwordsHandle(event){
      if(this.LUserPsd !== this.LUserPsds){
        this.value = "两次密码不一致请重新输入"
      }
      this.value = ""
      return true
    },
    qqHandle(event){
        window.location.href ="http://ios.pgzs.com/app?action=content&appid=444934666&ala&placeid=111002"
    },
    wxHandle(event){
      window.location.href = "http://ios.pgzs.com/app?action=content&appid=414478124&ala&placeid=111002"
    },
    wbHandle(event){
      window.location.href = "http://ios.pgzs.com/app?action=content&appid=350962117&ala&placeid=111002"
    },
    // 图片验证码
    createCode(){
        code = "";    
        var codeLength = 4;//验证码的长度   
        var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',   
         'S','T','U','V','W','X','Y','Z');//随机数   
        for(var i = 0; i < codeLength; i++) {//循环操作   
            var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）   
            code += random[index];//根据索引取得随机数加到code上   
        }   
            this.checkCode = code;//把code值赋给验证码   
    },
    // 失焦验证图和密码
    checkLpicma(){
      
        this.picLyanzhengma.toUpperCase();//取得输入的验证码并转化为大写         
        if(this.picLyanzhengma == '') {
           this.value = '请输入验证码'
        }else if(this.picLyanzhengma.toUpperCase() != this.checkCode ) { //若输入的验证码与产生的验证码不一致时    
            console.log( this.picLyanzhengma.toUpperCase())
            console.log(code)           
            this.value = '输入的验证码不正确'
            this.createCode();//刷新验证码   
            this.picLyanzhengma = '';
        }else { //输入正确时   
            this.value = ''
            return true;
        } 
    },
      created(){
      this.createCode();
    }
  }
}
</script>

<style lang="css" scoped>
.register{
  font-size: 0.3rem;
  position: relative;
}
.register .backdrop img{
  filter: blur(2px);
  opacity: 0.5;
}
.title-logo{
  width: 80%;
  display: flex;
  text-align: center;
  position: absolute;
  top: 0.8rem;
  left: 10%;
}
.title-logo .logo img{
  flex: 1;
  width: 0.65rem;
}
.title-logo .title{
  flex: 2;
}
.title-logo .title h3{
  letter-spacing: 0.2rem;
}
.title-logo .title hr{
  width: 80%;
  margin: 0 auto;
}
.title-logo .title p{
  font-size: 0.2rem;
}
.login-box{
  font-size: 0.24rem;
  position: absolute;
  top: 2rem;
  width: 70%;
  left: 15%;
}
.login-box input{
  padding-left: 0.1rem;
  background-color: #fff;
  border: 1px solid #eee;
  width: 100%;
}
.login-box .userName{
  border-radius: 5px 5px 0 0;
}
.login-box .passWords{
  border-radius: 0 0 5px 5px;
}
.login-box .verify{
  margin-top: 0.2rem;
  border-radius: 5px;
  width: 60%;
}
.login-box .verification1{
  padding: 0;
  width: 30%;
}
.login-box button{
  background-color: #01bbae;
  margin-top: 0.3rem;
  font-size: 0.2rem;
  border-radius: 5px;
  border: none;
  color: #fff;
  outline: none;
  width: 100%;
  height: 0.4rem;
}
.login-box a{
  font-size: 0.16rem;
}
.foot{
  width: 100%;
  text-align: center;
  font-size: 0.2rem;
  position: absolute;
  bottom: 0.1rem;
}
.foot i{
  font-size: 0.4rem;
  margin: 0 0.2rem;
}
.foot .copyright{
  font-size: 0.14rem;
  margin-top: 0.1rem;
}
.result{
  position: absolute;
  font-size: 0.14rem;
  text-align: left;
  color: #f75454;
  width: 70%;
  top: 3.75rem;
  left: 15%;
}
</style>